<template>
  <div class='list-common-table'>
    <t-form
      ref='form'
      :data='formData'
      :label-width='80'
      colon
      @reset='onReset'
      @submit='onSubmit'
      :style="{ marginBottom: '8px' }"
    >
      <t-row>
        <t-col :span='10'>
          <t-row :gutter='[16, 24]'>
            <t-col :flex='1'>
              <t-form-item label='领养人名称' name='name'>
                <t-input
                  v-model='formData.name'
                  class='form-item-content'
                  type='search'
                  placeholder='请输入领养人名称'
                  :style="{ minWidth: '134px' }"
                />
              </t-form-item>
            </t-col>
            <t-col :flex='1'>
              <t-form-item label='领养状态' name='status'>
                <t-select
                  v-model='formData.status'
                  class='form-item-content`'
                  :options='CONTRACT_STATUS_OPTIONS'
                  placeholder='请选择领养状态'
                />
              </t-form-item>
            </t-col>
            <t-col :flex='1'>
              <t-form-item label='审核编号' name='no'>
                <t-input
                  v-model='formData.no'
                  class='form-item-content'
                  placeholder='请输入审核编号'
                  :style="{ minWidth: '134px' }"
                />
              </t-form-item>
            </t-col>
          </t-row>
        </t-col>

        <t-col :span='2' class='operation-container'>
          <t-button theme='primary' type='submit' :style="{ marginLeft: '8px' }"> 查询</t-button>
          <t-button type='reset' variant='base' theme='default'> 重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <div class='table-container'>
      <t-table
        :data='data'
        :columns='columns'
        :rowKey='rowKey'
        :verticalAlign='verticalAlign'
        :hover='hover'
        :pagination='pagination'
        @page-change='rehandlePageChange'
        @change='rehandleChange'
        :loading='dataLoading'
        :headerAffixedTop='true'
        :headerAffixProps='{ offsetTop, container: getContainer }'
      >
        <template #status='{ row }'>
          <t-tag v-if='row.status === CONTRACT_STATUS.FAIL' theme='danger' variant='light-outline'>审核失败</t-tag>
          <t-tag v-if='row.status === CONTRACT_STATUS.AUDIT_PENDING' theme='warning' variant='light-outline'>待审核</t-tag>
          <t-tag v-if='row.status === CONTRACT_STATUS.EXEC_PENDING' theme='warning' variant='light-outline'>待审核</t-tag>
          <t-tag v-if='row.status === CONTRACT_STATUS.EXECUTING' theme='success' variant='light-outline'>审核中</t-tag>
          <t-tag v-if='row.status === CONTRACT_STATUS.FINISH' theme='success' variant='light-outline'>已完成</t-tag>
        </template>
        <template #contractType='{ row }'>
          <p v-if='row.contractType === CONTRACT_TYPES.MAIN'>审核失败</p>
          <p v-if='row.contractType === CONTRACT_TYPES.SUB'>待审核</p>
          <p v-if='row.contractType === CONTRACT_TYPES.SUPPLEMENT'>待审核</p>
        </template>
        <template #paymentType='{ row }'>
          <p v-if='row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT' class='payment-col'>
            付款
            <trend class='dashboard-item-trend' type='up' />
          </p>
          <p v-if='row.paymentType === CONTRACT_PAYMENT_TYPES.RECIPT' class='payment-col'>
            收款
            <trend class='dashboard-item-trend' type='down' />
          </p>
        </template>
        <template #op='slotProps'>
          <a class='t-button-link' @click='gotoDetail(slotProps)'>详细信息</a>
          <a class='t-button-link' @click='rehandleClickOp(slotProps)'>操作</a>
          <a class='t-button-link' @click='handleClickDelete(slotProps)'>删除</a>
        </template>
      </t-table>
      <t-dialog
        header='确认删除当前所选申请？'
        :body='confirmBody'
        :visible.sync='confirmVisible'
        @confirm='onConfirmDelete'
        :onCancel='onCancel'
      >
      </t-dialog>

      <!-- 申请人管理弹窗 -->
      <t-dialog header='管理申请' :visible.sync='formVisible' :width='680' :footer='false'>
        <div slot='body'>
          <!-- 表单内容 -->
          <t-form :data='formData' ref='form' @submit='onSubmit' :rules='FORM_RULES' :labelWidth='100'>
            <t-form-item label='申请人名称' name='applicant'>
              <t-input :style="{ width: '480px' }" :disabled='true' v-model='formData.applicant' placeholder='申请人名称'></t-input>
            </t-form-item>
            <t-form-item label='审核描述' name='description'>
              <t-textarea :style="{ width: '480px' }" v-model='formData.description' placeholder='审核通过/不通过的原因'></t-textarea>
            </t-form-item>
            <t-form-item label='备注' name='remark'>
              <t-textarea :style="{ width: '480px' }" v-model='formData.remark' placeholder='备注' name='description'>
              </t-textarea>
            </t-form-item>
            <t-form-item label='审核状态' name='status'>
              <t-radio-group v-model='formData.status'>
                <t-radio value='0'>通过</t-radio>
                <t-radio value='1'>未通过</t-radio>
              </t-radio-group>
            </t-form-item>
            <t-form-item style='float: right'>
              <t-button variant='outline' @click='formVisible = false'>取消</t-button>
              <t-button theme='primary' type='submit'>确定</t-button>
            </t-form-item>
          </t-form>
        </div>
      </t-dialog>
    </div>
  </div>
</template>
<script>
import { prefix } from '@/config/global'
import Trend from '@/components/trend/index.vue'

import {
  CONTRACT_STATUS,
  CONTRACT_STATUS_OPTIONS,
  CONTRACT_TYPES,
  CONTRACT_TYPE_OPTIONS,
  CONTRACT_PAYMENT_TYPES
} from '@/constants'

const FORM_RULES = {
  applicant: [{required: true, message: '必填', type: 'error'}],
  description: [{required: true, email: true, message: '必填', type: 'error'}],
  remark: [{required: true, message: '必填', type: 'error'}],
  status: [{required: true, message: '必填', type: 'error'}]
}

export default {
  name: 'list-table',
  components: {
    Trend
  },
  data () {
    return {
      FORM_RULES,
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_TYPE_OPTIONS,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      formData: {
        applicant: '',
        remark: '',
        no: undefined,
        status: undefined
      },
      data: [
        {
          'index': 1,
          'status': 3,
          'no': 'BH002',
          'name': 'BP0012',
          'paymentType': 0,
          'contractType': 1,
          'updateTime': '2020-05-30 15:25:04',
          'amount': '498,000,000',
          'adminName': '罗勇强'
        },
        {
          'index': 2,
          'status': 2,
          'no': 'BH0035',
          'name': 'BP006',
          'paymentType': 1,
          'contractType': 2,
          'updateTime': '2020-05-30 00:27:19',
          'amount': '467,000,000',
          'adminName': '周磊'
        },
        {
          'index': 3,
          'status': 2,
          'no': 'BH0060',
          'name': 'BP0044',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 04:46:13',
          'amount': '83,000,000',
          'adminName': '赵秀兰'
        },
        {
          'index': 4,
          'status': 2,
          'no': 'BH002',
          'name': 'BP0065',
          'paymentType': 0,
          'contractType': 1,
          'updateTime': '2020-05-30 19:20:07',
          'amount': '26,000,000',
          'adminName': '董霞'
        },
        {
          'index': 5,
          'status': 2,
          'no': 'BH007',
          'name': 'BP0043',
          'paymentType': 0,
          'contractType': 1,
          'updateTime': '2020-05-30 01:20:32',
          'amount': '173,000,000',
          'adminName': '魏敏'
        },
        {
          'index': 6,
          'status': 2,
          'no': 'BH003',
          'name': 'BP0028',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 21:44:47',
          'amount': '343,000,000',
          'adminName': '龙平'
        },
        {
          'index': 7,
          'status': 2,
          'no': 'BH0084',
          'name': 'BP0065',
          'paymentType': 0,
          'contractType': 2,
          'updateTime': '2020-05-30 15:21:57',
          'amount': '335,000,000',
          'adminName': '沈强'
        },
        {
          'index': 8,
          'status': 2,
          'no': 'BH003',
          'name': 'BP0019',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 16:05:16',
          'amount': '134,000,000',
          'adminName': '姚超'
        },
        {
          'index': 9,
          'status': 3,
          'no': 'BH0042',
          'name': 'BP0025',
          'paymentType': 1,
          'contractType': 2,
          'updateTime': '2020-05-30 17:11:39',
          'amount': '411,000,000',
          'adminName': '万平'
        },
        {
          'index': 10,
          'status': 3,
          'no': 'BH0056',
          'name': 'BP0054',
          'paymentType': 0,
          'contractType': 1,
          'updateTime': '2020-05-30 13:15:36',
          'amount': '215,000,000',
          'adminName': '刘超'
        },
        {
          'index': 11,
          'status': 2,
          'no': 'BH0084',
          'name': 'BP0066',
          'paymentType': 0,
          'contractType': 1,
          'updateTime': '2020-05-30 01:47:25',
          'amount': '307,000,000',
          'adminName': '萧洋'
        },
        {
          'index': 12,
          'status': 2,
          'no': 'BH0082',
          'name': 'BP0010',
          'paymentType': 0,
          'contractType': 0,
          'updateTime': '2020-05-30 22:55:21',
          'amount': '88,000,000',
          'adminName': '张强'
        },
        {
          'index': 13,
          'status': 3,
          'no': 'BH0086',
          'name': 'BP0063',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 17:10:58',
          'amount': '282,000,000',
          'adminName': '邹刚'
        },
        {
          'index': 14,
          'status': 3,
          'no': 'BH0082',
          'name': 'BP0036',
          'paymentType': 0,
          'contractType': 1,
          'updateTime': '2020-05-30 14:56:47',
          'amount': '115,000,000',
          'adminName': '贺娜'
        },
        {
          'index': 15,
          'status': 1,
          'no': 'BH0064',
          'name': 'BP0083',
          'paymentType': 0,
          'contractType': 1,
          'updateTime': '2020-05-30 22:49:33',
          'amount': '53,000,000',
          'adminName': '常洋'
        },
        {
          'index': 16,
          'status': 3,
          'no': 'BH0042',
          'name': 'BP0016',
          'paymentType': 0,
          'contractType': 0,
          'updateTime': '2020-05-30 21:45:28',
          'amount': '480,000,000',
          'adminName': '陆敏'
        },
        {
          'index': 17,
          'status': 3,
          'no': 'BH0093',
          'name': 'BP0024',
          'paymentType': 1,
          'contractType': 0,
          'updateTime': '2020-05-30 05:23:35',
          'amount': '284,000,000',
          'adminName': '崔洋'
        },
        {
          'index': 18,
          'status': 1,
          'no': 'BH0068',
          'name': 'BP0055',
          'paymentType': 0,
          'contractType': 2,
          'updateTime': '2020-05-30 14:17:35',
          'amount': '486,000,000',
          'adminName': '熊涛'
        },
        {
          'index': 19,
          'status': 2,
          'no': 'BH0087',
          'name': 'BP0040',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 08:17:34',
          'amount': '330,000,000',
          'adminName': '朱洋'
        },
        {
          'index': 20,
          'status': 2,
          'no': 'BH0063',
          'name': 'BP0028',
          'paymentType': 0,
          'contractType': 0,
          'updateTime': '2020-05-30 13:16:15',
          'amount': '107,000,000',
          'adminName': '曾磊'
        },
        {
          'index': 21,
          'status': 3,
          'no': 'BH0097',
          'name': 'BP0048',
          'paymentType': 0,
          'contractType': 2,
          'updateTime': '2020-05-30 10:38:44',
          'amount': '54,000,000',
          'adminName': '梁霞'
        },
        {
          'index': 22,
          'status': 4,
          'no': 'BH0076',
          'name': 'BP0053',
          'paymentType': 0,
          'contractType': 0,
          'updateTime': '2020-05-30 22:19:45',
          'amount': '464,000,000',
          'adminName': '乔磊'
        },
        {
          'index': 23,
          'status': 3,
          'no': 'BH0061',
          'name': 'BP002',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 11:40:12',
          'amount': '466,000,000',
          'adminName': '锺秀英'
        },
        {
          'index': 24,
          'status': 4,
          'no': 'BH0081',
          'name': 'BP0086',
          'paymentType': 0,
          'contractType': 0,
          'updateTime': '2020-05-30 09:16:37',
          'amount': '29,000,000',
          'adminName': '萧勇'
        },
        {
          'index': 25,
          'status': 3,
          'no': 'BH0096',
          'name': 'BP0012',
          'paymentType': 0,
          'contractType': 2,
          'updateTime': '2020-05-30 22:00:43',
          'amount': '56,000,000',
          'adminName': '贺敏'
        },
        {
          'index': 26,
          'status': 2,
          'no': 'BH0062',
          'name': 'BP0040',
          'paymentType': 0,
          'contractType': 2,
          'updateTime': '2020-05-30 05:27:45',
          'amount': '96,000,000',
          'adminName': '罗芳'
        },
        {
          'index': 27,
          'status': 2,
          'no': 'BH0039',
          'name': 'BP0036',
          'paymentType': 0,
          'contractType': 0,
          'updateTime': '2020-05-30 08:43:45',
          'amount': '361,000,000',
          'adminName': '孟杰'
        },
        {
          'index': 28,
          'status': 2,
          'no': 'BH0011',
          'name': 'BP0018',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 01:21:01',
          'amount': '275,000,000',
          'adminName': '董刚'
        },
        {
          'index': 29,
          'status': 1,
          'no': 'BH0092',
          'name': 'BP0045',
          'paymentType': 1,
          'contractType': 0,
          'updateTime': '2020-05-30 19:29:46',
          'amount': '48,000,000',
          'adminName': '秦平'
        },
        {
          'index': 30,
          'status': 2,
          'no': 'BH0042',
          'name': 'BP0089',
          'paymentType': 1,
          'contractType': 0,
          'updateTime': '2020-05-30 20:02:17',
          'amount': '470,000,000',
          'adminName': '段芳'
        },
        {
          'index': 31,
          'status': 4,
          'no': 'BH0077',
          'name': 'BP0065',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 19:43:59',
          'amount': '272,000,000',
          'adminName': '陈磊'
        },
        {
          'index': 32,
          'status': 3,
          'no': 'BH0097',
          'name': 'BP0017',
          'paymentType': 0,
          'contractType': 0,
          'updateTime': '2020-05-30 07:26:12',
          'amount': '356,000,000',
          'adminName': '孟霞'
        },
        {
          'index': 33,
          'status': 3,
          'no': 'BH0071',
          'name': 'BP0079',
          'paymentType': 0,
          'contractType': 2,
          'updateTime': '2020-05-30 19:39:53',
          'amount': '262,000,000',
          'adminName': '刘娜'
        },
        {
          'index': 34,
          'status': 3,
          'no': 'BH0071',
          'name': 'BP0066',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 08:19:02',
          'amount': '40,000,000',
          'adminName': '武平'
        },
        {
          'index': 35,
          'status': 2,
          'no': 'BH005',
          'name': 'BP0054',
          'paymentType': 1,
          'contractType': 1,
          'updateTime': '2020-05-30 21:44:21',
          'amount': '80,000,000',
          'adminName': '史明'
        },
        {
          'index': 36,
          'status': 2,
          'no': 'BH0073',
          'name': 'BP0033',
          'paymentType': 0,
          'contractType': 2,
          'updateTime': '2020-05-30 22:34:04',
          'amount': '56,000,000',
          'adminName': '许艳'
        }
      ],
      dataLoading: false,
      formVisible: false,
      value: 'first',
      columns: [
        {title: '领养人名称', fixed: 'left', width: 200, align: 'left', ellipsis: true, colKey: 'adminName'},
        {title: '领养状态', colKey: 'status', width: 200, cell: {col: 'status'}},
        {title: '审核编号', width: 200, ellipsis: true, colKey: 'no'},
        {align: 'left', fixed: 'right', width: 200, colKey: 'op', title: '操作'}
      ],
      rowKey: 'index',
      tableLayout: 'auto',
      verticalAlign: 'top',
      bordered: true,
      hover: true,
      rowClassName: (rowKey) => `${ rowKey }-class`,
      // 与pagination对齐
      pagination: {
        defaultPageSize: 20,
        total: 36,
        defaultCurrent: 1
      },
      confirmVisible: false,
      deleteIdx: -1
    }
  },
  computed: {
    confirmBody () {
      if (this.deleteIdx > -1) {
        const {name} = this.data?.[this.deleteIdx]
        return `删除后，${ name } 的所有申请信息将被清空，且无法恢复`
      }
      return ''
    },
    offsetTop () {
      return this.$store.state.setting.isUseTabsRouter ? 48 : 0
    }
  },
  mounted () {
    this.dataLoading = false
  },
  methods: {
    initData(){
      this.data.sort(function() {
        return (0.5-Math.random());
      });
    },
    getContainer () {
      return document.querySelector('.tdesign-starter-layout')
    },
    onReset (data) {
      console.log(data)
    },
    onSubmit (data) {
      this.data.sort(function() {
        return (0.5-Math.random());
      });
      this.$message.success('查询到20条数据')
      this.formVisible = false
      console.log('操作成功', data)
    },
    rehandlePageChange (curr, pageInfo) {
      console.log('分页变化', curr, pageInfo)
    },
    rehandleChange (changeParams, triggerAndData) {
      console.log('统一Change', changeParams, triggerAndData)
    },
    rehandleClickOp ({text, row}) {
      this.formVisible = true
      this.formData.applicant = row.adminName
      console.log(text, row)
    },
    gotoDetail ({text, row}) {
      // adoptInfoOnline
      this.$router.push('/adopt/adoptInfo-offline')
      // this.$router.push('/detail/add');
      console.log(text, row)
    },
    handleClickDelete (row) {
      this.deleteIdx = row.rowIndex
      this.confirmVisible = true
    },
    onConfirmDelete () {
      // 真实业务请发起请求
      this.data.splice(this.deleteIdx, 1)
      this.pagination.total = this.data.length
      this.confirmVisible = false
      this.$message.success('删除成功')
      this.resetIdx()
    },
    onCancel () {
      this.resetIdx()
    },
    resetIdx () {
      this.deleteIdx = -1
    }
  }
}
</script>

<style lang='less' scoped>
@import '@/style/variables.less';

.list-common-table {
  background-color: var(--td-bg-color-container);
  padding: 30px 32px;
  border-radius: var(--td-radius-default);
}

.form-item-content {
  width: 100%;
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.t-button + .t-button {
  margin-left: var(--td-comp-margin-s);
}
</style>
